<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<base th:href="@{/}">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>博客首页</title>

    <!-- Favicons -->
    <link rel="icon" href="assets/images/logo/Shop.ico">
    <link rel="stylesheet" th:href="@{assets/css/bootstrap.css}">
    <!-- 供应商CSS(图标字体) -->
<!--    <link rel="stylesheet" href="assets/css/vendor/fontawesome.min.css"/>-->
<!--    <link rel="stylesheet" href="assets/css/vendor/pe-icon-7-stroke.min.css"/>-->
    <!-- Plugins CSS (All Plugins Files) -->
<!--    <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css"/>-->
<!--    <link rel="stylesheet" href="assets/css/plugins/animate.min.css"/>-->
<!--    <link rel="stylesheet" href="assets/css/plugins/lightgallery.min.css"/>-->
<!--    <link rel="stylesheet" href="assets/css/plugins/aos.min.css"/>-->
<!--    <link rel="stylesheet" href="assets/css/plugins/nice-select.min.css"/>-->
    <!-- 主要的风格 CSS -->
<!--    <link rel="stylesheet" href="assets/css/style.css"/>-->


    <!-- 使用下面列出的精简版本文件以获得更好的性能，并删除上面列出的文件 -->
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
    <style>
        .blog-content{
            padding:0 20px;
            /*background-color: #bcbcbc;*/
            text-indent: 2em;
            float: left;
            width: 400px;
            height: 230px;
            display: -webkit-box;
            line-height:25px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 8;
            overflow: hidden;
        }
        .blog-thumb{
            width: 400px;
            height: 250px;
            float: left;
        }
        .fit-img{
            padding: 10px;
            width: 402px;
            height: 240px;
        }
        .single-blog .blog-content .blog-title{
            font-size: 16px;
        }
        .active{
            background-color: #727272;
        }
    </style>


</head>

<body>

<!-- Header Section Start -->
<div class="header section">

    <!--//导航栏-->
    <div th:replace="header::headerS"></div>
     <!--引用结束-->
</div>
<!-- Header Section End -->


<!-- Breadcrumb Section Start -->
<div class="section">

    <!-- Breadcrumb Area Start -->
    <div class="breadcrumb-area bg-primary">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li>
                        <a href="index.html"><i class="fa fa-home"></i> </a>
                    </li>
                    <li style="color: gray">博客</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->
</div>
<!-- Breadcrumb Section End -->
<h1 th:text="${message}"></h1>
<!-- 主体开始 -->
<div class="section section-margin">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-12">
                <p th:text="${m}" style="text-align: center;font-size: 20px"></p>
                <hr>
                <!-- 数据渲染开始 -->
                <div th:each="cms:${cmsTopicsList.list}">
                <div class="row mb-n8" th:onclick="('javascript:newTime('+${cms.id}+')')">
                    <div class="col-md-12 mb-8">
                        <div class="single-blog col-md-12">
                            <div class="blog-thumb col-md-6">
                                <a th:href="@{/blog/selectTopic/}+${cms.id}">
                                    <img class="fit-image fit-img" th:src="${cms.awardName}" alt="Blog Image" >
                                </a>
                            </div>
                            <div class="blog-content col-md-5">
                                <div class="blog-meta">
                                    <p><span class="meta-item date" th:text="${#dates.format(cms.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span> | <span th:text="${cms.name}"></span></p>
                                </div>
                                <p class="blog-title">
                                    <a th:href="@{/blog/selectTopic/}+${cms.id}"><span th:text="${cms.content}"></span></a>
                                </p>

                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <!-- 数据渲染结束-->
                <div class="row">
                    <div class="col-12">
                        <!--分页-->
                        <div th:if="${cmsTopicsList.pages!=0}">
                        <div class="toolbar_wrapper mt-8 border-top pt-8">
                            <!-- 分页开始 -->
                            <div class="blog-top-bar-right d-flex justify-content-center">
                                <nav aria-label="Page navigation" th:with="categoryId=${param.categoryId}">
                                    <ul class="pagination">
                                        <li th:class="${cmsTopicsList.pageNum<=1?'disabled':''}">
                                            <a  th:href="@{/blog/blog-right-sidebar(pageNum=${cmsTopicsList.prePage},pageSize=${cmsTopicsList.pageSize},categoryId=${categoryId})}" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>

                                        <p th:each="a:${cmsTopicsList.navigatepageNums}">
                                        <li th:class="${cmsTopicsList.pageNum==a}?'active':''">
                                            <a class="page-link"
                                               th:href="@{/blog/blog-right-sidebar(pageNum=${a},categoryId=${categoryId})}"
                                               th:text="${a}">
                                            </a>
                                        </li>
                                        </p >
                                        <li th:class="${cmsTopicsList.pageNum ge cmsTopicsList.pages}?'disabled':''" >
                                            <a th:href="@{/blog/blog-right-sidebar(pageNum=${cmsTopicsList.nextPage},categoryId=${categoryId})}"aria-label="Next">
                                                <span aria-hidden="true" >&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>

                            </div>
                            <!-- 分页结束 -->
                        </div>
                        <!--分页-->
                        </div>
                    </div>
                </div>
            </div>
            <!--引用右边-->
            <div class="col-lg-3 col-12" th:insert="~{rightBlog :: rightPage}"></div>
            <!--引用右边结束-->
        </div>
    </div>
</div>
<!-- 主体结束 -->
<!-- 底部开始 -->
<div th:insert="~{footer::footerS}"></div>
<!-- 底部结束 -->

<a href="#" class="scroll-top show" id="scroll-top">
    <i class="arrow-top pe-7s-angle-up-circle"></i>
    <i class="arrow-bottom pe-7s-angle-up-circle"></i>
</a>

<!-- 缩小移动菜单开始-->
<div th:insert="~{mobile-menu::menuWrapper}"></div>
<!--缩小移动菜单结束 -->

<!-- Scripts -->
<!-- Global Vendor, plugins JS -->

<!-- Vendor JS -->

<!--<script src="assets/js/vendor/popper.min.js"></script>-->
<!--<script src="assets/js/vendor/bootstrap.min.js"></script>-->
<!--<script src="assets/js/vendor/jquery-3.5.1.min.js"></script>-->
<!--<script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>-->
<!--<script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>-->
<!--<script src="assets/js/plugins/aos.min.js"></script>-->
<!--<script src="assets/js/plugins/jquery.ajaxchimp.min.js"></script>-->
<!--<script src="assets/js/plugins/jquery-ui.min.js"></script>-->
<!--<script src="assets/js/plugins/nice-select.min.js"></script>-->
<!--<script src="assets/js/plugins/swiper-bundle.min.js"></script>-->
<!--<script src="assets/js/plugins/countdown.min.js"></script>-->
<!--<script src="assets/js/plugins/lightgallery-all.min.js"></script>-->
<!--
 Use the minified version files listed below for better performance and remove the files listed above -->


<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/plugins.min.js"></script>
<script>

    function newTime(id) {
        $.get("CreateLookTime",{id},function (result) {
        })
    }
</script>
<!--Main JS-->
<script src="assets/js/main.js"></script>
</body>

</html>